<template>
  <div>
    <div id="box"></div>
    <vertical-menu></vertical-menu>
    <div class="tabbar">
      <div class="page-header">
        <i class="el-icon-affairs iconfont"></i>
        <span>Addairs</span>
        <el-button class="leave" @click="goTo('/setting/leave')">Leave Setting</el-button>
      </div>
    </div>
    <div id="base">
      <div class="content">
        <div class="collapse-item">
          <div class="title">
            <i class="el-icon-send iconfont"></i>
            <span>Pending</span>
            <i class="el-icon-arrow-right"  @click="pendingVisibleChange()" v-bind:class="{'active':pendingVisible, 'back':!pendingVisible}"></i>
          </div>
          <div class="item" v-show="pendingVisible">
            <div class="filtrate">
              <div class="row">
                <el-date-picker
                  class="select"
                  type="daterange"
                  v-model="filtrate1.time"
                  range-separator="-"
                  start-placeholder="startTime"
                  end-placeholder="endTime"
                  placeholder="select time range"
                  format="yyyy-MM-DD"
                  value-format="yyyy-MM-DD">
                </el-date-picker>
              </div>
              <div class="row">
                <i class="el-icon-department iconfont"></i>
                <el-select v-model="filtrate1.deSelect" placeholder="department">
                  <el-option
                    v-for="item in department"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div class="row">
                <i class="el-icon-user iconfont"></i>
                <el-select v-model="filtrate1.staffSelect" placeholder="staff">
                  <el-option
                    v-for="item in staffData"
                    :key="item.number"
                    :label="item.name"
                    :value="item.number">
                  </el-option>
                </el-select>
              </div>
              <!-- <div class="row">
                <i class="el-icon-manager iconfont"></i>
                <el-select v-model="filtrate1.managerSelect" placeholder="manager">
                  <el-option
                    v-for="item in managerData"
                    :key="item.number"
                    :label="item.name"
                    :value="item.number">
                  </el-option>
                </el-select>
              </div> -->
            </div>
            <el-row :gutter="10">
              <el-col :span="8" v-for="(item, index) in audit" :key="index">
                <div class="card-wrap">
                  <div class="row-first">
                    <span style="color: #7C8C4F">
                      {{item.typename}}
                    </span>
                    <el-button @click="showDetail(item)">View details>></el-button>
                  </div>
                  <div class="row">
                    <i class="el-icon-user iconfont"></i>
                    <span style="color: #797979">
                      {{item.name}}
                    </span>
                  </div>
                  <div class="row">
                    <i class="el-icon-date"></i>
                    <div class="time">
                      <span>{{item.startTime}}</span>
                    </div>
                    <div class="divide">
                      <span>-</span>
                    </div>
                    <div class="time">
                      <span>{{item.finishTime}}</span>
                    </div>
                  </div>
                  <div class="row">
                    <i class="el-icon-upload2"></i>
                    <div class="time">
                      <span>{{item.submitTime}}</span>
                    </div>
                    <span class="prompt">Pending</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="collapse-item">
          <div class="title">
            <i class="el-icon-finish iconfont"></i>
            <span>Finished</span>
            <i class="el-icon-arrow-right"  @click="finishedVisibleChange()" v-bind:class="{'active':finishedVisible, 'back':!finishedVisible}"></i>
          </div>
          <div class="item" v-show="finishedVisible">
            <div class="filtrate">
              <div class="row">
                <el-date-picker
                  class="select"
                  type="daterange"
                  v-model="filtrate2.time"
                  range-separator="-"
                  start-placeholder="startTime"
                  end-placeholder="endTime"
                  placeholder="select time range"
                  format="yyyy-MM-DD"
                  value-format="yyyy-MM-DD">
                </el-date-picker>
              </div>
              <div class="row">
                <i class="el-icon-department iconfont"></i>
                <el-select v-model="filtrate2.deSelect" placeholder="department">
                  <el-option
                    v-for="item in department"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div class="row">
                <i class="el-icon-user iconfont"></i>
                <el-select v-model="filtrate2.staffSelect" placeholder="staff">
                  <el-option
                    v-for="item in staffData"
                    :key="item.number"
                    :label="item.name"
                    :value="item.number">
                  </el-option>
                </el-select>
              </div>
              <!-- <div class="row">
                <i class="el-icon-manager iconfont"></i>
                <el-select v-model="filtrate2.managerSelect" placeholder="manager">
                  <el-option
                    v-for="item in managerData"
                    :key="item.number"
                    :label="item.name"
                    :value="item.number">
                  </el-option>
                </el-select>
              </div> -->
            </div>
            <el-row :gutter="10">
              <el-col :span="8" v-for="(item, index) in finish" :key="index">
                <div class="card-wrap">
                  <div class="row-first">
                    <span style="color: #7C8C4F">{{item.typename}}</span>
                    <el-button @click="showDetail(item)">View details>></el-button>
                  </div>
                  <div class="row">
                    <i class="el-icon-user iconfont"></i>
                    <span style="color: #797979">{{item.name}}</span>
                  </div>
                  <div class="row">
                    <i class="el-icon-date"></i>
                    <div class="time">
                      <span>{{item.startTime}}</span>
                    </div>
                    <div class="divide">
                      <span>-</span>
                    </div>
                    <div class="time">
                      <span>{{item.finishTime}}</span>
                    </div>
                  </div>
                  <div class="row">
                    <i class="el-icon-upload2"></i>
                    <div class="time">
                      <span>{{item.submitTime}}</span>
                    </div>
                    <span class="prompt">
                      <i class="el-icon-check"></i>
                      Finished
                    </span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="view-detail">
        <div class="row-first">
          <span class="main">{{applicationInfo.typename}}</span>
          <span style="color: #797979">Application</span>
        </div>
        <div class="row">
          <i class="el-icon-user iconfont"></i>
          <span style="color: #797979">{{applicationInfo.name}}</span>
        </div>
        <!-- <div class="row">
          <i class="el-icon-manager iconfont"></i>
          <span style="color: #797979">Dabby</span>
        </div> -->
        <!-- <div class="row">
          <i class="el-icon-department iconfont"></i>
          <span style="color: #797979">Department1</span>
        </div> -->
        <div class="row">
          <i class="el-icon-date"></i>
          <div class="time">
            <span>{{applicationInfo.startTime}}</span>
          </div>
          <div class="divide">
            <span>-</span>
          </div>
          <div class="time">
            <span>{{applicationInfo.finishTime}}</span>
          </div>
        </div>
        <div class="text-area">
          <span class="label">Reason For Leave</span>
          <el-button>view picture</el-button>
          <div class="reason">
            {{applicationInfo.reason}}
          </div>
        </div>
        <div class="text-area">
          <span class="label">My reply</span>
          <el-input type="textarea" v-model="applicationInfo.aduitreson" :rows="5" placeholder="My reply" :disabled="applicationInfo.state === 1"></el-input>
        </div>
        <div class="button" v-if="applicationInfo.state === 0">
          <el-button type="primary" @click="dealAffairs(1)">Approve</el-button>
          <el-button type="" @click="dealAffairs(2)">Reject</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VerticalMenu from '@/components/VerticalMenu.vue'
export default {
  components: {
    VerticalMenu,
  },
  data(){
    return {
      user: {},
      pendingVisible: true,
      finishedVisible:true,
      filtrate1: {
        time: '',
        deSelect: '',
        staffSelect: '',
        managerSelect: '',
      },
      filtrate2: {
        time: '',
        deSelect: '',
        staffSelect: '',
        managerSelect: '',
      },
      audit: [],
      finish: [],
      record:{
        role: 'Manager Assistant',
        start: '6th Sept.',
        end: '12th Sept',
      },
      reply: '',
      applicationInfo: '',
      staffData: [],
      managerData: [],
      department: [],
    }
  },
  created(){
    this.user = JSON.parse(sessionStorage.getItem('user'));
  },
  mounted(){
    this.getAudit();
    this.getFinish();
    this.staffData = JSON.parse(sessionStorage.getItem('staffData'));
    this.managerData = JSON.parse(sessionStorage.getItem('managerData'));
    if(this.staffData === null || this.managerData === null){
      this.getAllStaff();
    }
    this.department = JSON.parse(sessionStorage.getItem('department'));
    if(this.department === null){
      this.getAllDepartment();
    }
  },
  methods: {
    getAllStaff(){
      const _this = this
      _this.$api.staff.getAllStaff().then(res => {
        if (res.data.code === 2000) {
          _this.staffData = res.data.data;
          // _this.sortPosition(_this.staffData)
          sessionStorage.setItem('staffData',JSON.stringify(_this.staffData));
          _this.managerData = _this.staffData.filter((item) => {
            return item.position != 'Staff'
          })
          sessionStorage.setItem('managerData',JSON.stringify(_this.managerData));
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    getAllDepartment() {
      const _this = this
      _this.$api.department.getAllDepartment().then(res => {
        if (res.data.code === 2000) {
          _this.department = res.data.data;
          sessionStorage.setItem('department',JSON.stringify(_this.department));
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    goTo(path) {
      this.$router.push(path);
    },
    pendingVisibleChange(){
      const _this=this;
      _this.pendingVisible = !_this.pendingVisible;
    },
    finishedVisibleChange(){
      const _this=this;
      _this.finishedVisible = !_this.finishedVisible;
    },
    changeDay(date){
      var m=new Array('Jan.','Feb.','Mar.','Apr.','May.','Jun.','Jul','Aug.','Sep.','Oct.','Nov.','Dec');
      var d=new Array("st","nd","rd","th");
      var mn = new Date(date).getMonth();
      var dn = new Date(date).getDate();
      var dns;
      if(((dn%10)<1) ||((dn%10)>3)){
        dns = d[3];
      }else {
        dns=d[(dn%10)-1];
        if((dn==11)||(dn==12)){
          dns=d[3];
        }
      }
      return dn + dns + ' '+ m[mn]
    },
    getAudit() {
      const _this = this;
      _this.$api.affairs.getAudit().then(res => {
        if(res.data.code === 2000){
          _this.audit = res.data.data.map((item) => {
            return {
              id: item.id,
              vocationType: item.vocationType,
              typename: item.typename,
              name: item.name,
              number: item.number,
              startTime: _this.changeDay(item.startTime),
              finishTime: _this.changeDay(item.finishTime),
              reason: item.reason,
              imageId: item.imageId,
              submitTime: _this.changeDay(item.submitTime),
              aduitreson: '',
              state: item.state,
            };
          });
          if(_this.audit){
            _this.applicationInfo = _this.audit[0];
          }
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    getFinish() {
      const _this = this;
      _this.$api.affairs.getFinish().then(res => {
        if(res.data.code === 2000){
          _this.finish = res.data.data.map((item) => {
            return {
              id: item.id,
              vocationType: item.vocationType,
              typename: item.typename,
              name: item.name,
              number: item.number,
              startTime: _this.changeDay(item.startTime),
              finishTime: _this.changeDay(item.finishTime),
              reason: item.reason,
              imageId: item.imageId,
              submitTime: _this.changeDay(item.submitTime),
              aduitreson: item.aduitreson,
              state: item.state,
            };
          });
          console.log(_this.finish);
          if(_this.finish && _this.applicationInfo === ''){
            _this.applicationInfo = _this.finish[0];
          }
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    showDetail(val) {
      this.applicationInfo = val;
      console.log(val);
    },
    dealAffairs(val) {
      const _this = this;
      _this.$api.affairs.dealAffairs({
        approver: _this.user.number,
        audit_reason: _this.applicationInfo.audit_reason,
        affair_id: _this.applicationInfo.id,
        result: val,
      }).then(res => {
        if(res.data.code === 2000) {
          _this.$message.success("deal success");
          _this.applicationInfo === '';
          this.getAudit();
          this.getFinish();
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
  }
}
</script>

<style lang="less" scoped>
  #box {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: #F2F2F2;
    z-index: -1;
  }

  #base {
    padding: 100px 0 0 250px;
  }

  .content {
    padding-bottom: 20px;
    width: 1260px;
    background-color: #F2F2F2;
    float: left;
  }

  .tabbar {
    margin: 0 0 0 250px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #F2F2F2;
    z-index: 100;
    position: fixed;
  }

  .page-header {
    width: 1234px;
    height: 64px;
    background-color: rgba(242,235,211,0.3);
    border: 2px solid rgba(150, 169, 97,0.5);
    border-radius: 5px;
    margin: 0 20px 0 15px;
    line-height: 64px;
    span {
      color: #473C33;
      margin-left: 10px;
      font-size: 30px;
      // font-weight: 600;
    }
    .el-icon-affairs{
      margin-left: 20px;
      font-size: 35px;
      color: #ABC270;
      // vertical-align: middle;
    }
    .leave{
      float: right;
      margin-right: 20px;
      margin-top: 10px;
      font-size: 20px;
      background-color: rgba(150,169,97,0.2);
      color: #697644;
    }
  }

  .collapse-item {
    margin-top: 5px;
    margin-left: 15px;
    width: 800px;
    .title {
      width: 800px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
      background-color: rgba(242,235,211,0.3);
      border: 2px solid rgba(150, 169, 97,0.5);
      border-radius: 5px;
    }
    .el-icon-finish, .el-icon-send{
      margin-right: 10px;
      font-size: 25px;
      color: rgba(246,119,28,0.9);
      vertical-align: middle;
      cursor: pointer;
    }
    .el-icon-arrow-right {
      position: relative;
      left: 320px;
      font-size: 25px;
      color: rgba(246,119,28,0.9);
      vertical-align: middle;
      cursor: pointer;
    }
    .active {
      transform: rotate(90deg);
      transition: transform .3s;
    }
    .back {
      transition: transform .3s;
    }
  }

  .item {
    margin-top: 10px;
    .filtrate .row {
      display: inline;
      // /deep/ .el-range-editor.el-input__inner {
      //   // width: 250px;
      // }
      /deep/ .el-input__inner{
        background-color: rgba(150, 169, 97,0.2);
      }
      /deep/ .el-input__inner::placeholder {
        color: #96A961;
      }
      /deep/ .el-range-input {
        background-color: rgba(150, 169, 97,0);
      }
      /deep/ .el-range-input::placeholder {
        color: #96A961;
      }
      /deep/ .el-select {
        width: 180px;
      }
      /deep/ .el-icon-date{
        color: rgba(246,119,28,0.9);
      }
      .el-icon-user, .el-icon-manager, .el-icon-department {
        margin-left: 20px;
      }
    }
    .el-icon-user, .el-icon-manager, .el-icon-department {
      font-size: 20px;
      margin-right: 5px;
    }
  }
  .card-wrap {
    margin: 8px 0;
    background-color: rgba(242,235,211,0.4);
    padding: 10px 10px 0px 10px ;
    border: 1px solid rgba(150, 169, 97,0.2);
    border-radius: 5px;
    .row-first {
      line-height: 20px;
      font-size: 18px;
      margin-left: 5px;
      margin-bottom: 10px;
      /deep/ .el-button {
        padding: 8px 10px;
        font-size: 12px;
        float: right;
        background-color: rgba(150,169,97,0.2);
        color: #697644;
      }
    }
    .prompt{
      font-size: 14px;
      float: right;
      margin-top: 10px;
      color: rgba(246,119,28,0.9);
    }
    .el-icon-check {
      font-size: 20px;
      margin-right: 3px;
      color: #9ABB3D;
    }
    .el-icon-close {
      font-size: 20px;
      margin-right: 3px;
      color: rgba(223,13,13,0.84);
    }
  }

  .row {
    line-height: 20px;
    font-size: 16px;
    margin-bottom: 10px;
    .time {
      width: 90px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      background-color: rgba(150, 169, 97,0.2);
      display: inline-block;
      color: #96A961;
      border-radius: 5px;
    }
    .divide {
      line-height: 25px;
      display: inline-block;
      margin: 0 10px;
    }
  }

  .el-icon-user, .el-icon-manager, .el-icon-department, .el-icon-date, .el-icon-upload2 {
    font-size: 20px;
    margin-right: 6px;
    color: rgba(246,119,28,0.9);
  }

  .view-detail {
    top: 100px;
    left: 1090px;
    right: 30px;
    bottom: 30px;
    position: fixed;
    background-color: rgba(150,169,97,0.1);
    border-radius: 5px;
    border: 2px solid rgba(150, 169, 97,0.5);
    padding: 20px;
    .row-first {
      margin: 10px 0;
      font-size: 25px;
      font-weight: 600;
      .main {
        color: #7C8C4F;
        margin-right: 10px;
      }
    }
    .row {
      margin: 10px 10px;
    }
    .text-area{
      margin: 20px 0;

      .label {
        font-size: 20px;
        color: rgba(246,119,28,0.9);
      }
      /deep/ .el-button {
        padding: 6px 10px;
        font-size: 14px;
        float: right;
        background-color: rgba(150,169,97,0.4);
        border: 1px solid #96A961;
        color: #FFFFFF;
      }
      .reason {
        padding: 10px 10px;
        margin-top: 15px;
        width: 350px;
        height: 150px;
        background: rgba(242,242,242,0.3);
        border: 1px solid #96A961;
        border-radius: 5px;
        color: #797979;
      }
      /deep/ .el-textarea__inner {
        margin-top: 15px;
        background: rgba(242,242,242,0.3);
        border: 1px solid #96A961;
        border-radius: 5px;
      }
    }
    .button{

      /deep/ .el-button {
        padding: 12px 0px;
        text-align: center;
        width: 180px;
      }
    }
  }
</style>
